<template>
  <el-table 
    :data="data"
    row-key="id"
    style="width: 100%"
    @row-click="handleRowClick"
    class="alert-table"
  >
    <el-table-column type="expand">
      <template #default="{row}">
        <div v-if="row.expanded" class="expand-content">
          <div class="detail-row">
            <span class="detail-label">处理情况：</span>
            <span :class="statusClass(row.status)">{{ row.status }}</span>
            <span class="detail-label">告警时段：</span>
            <span>{{ row.alertTime }}</span>
          </div>
          <div class="detail-row">
            <span class="detail-label">当前流量：</span>
            <span>{{ row.flow }} 架次/小时</span>
            <span class="detail-label">空域容量：</span>
            <span>{{ row.capacity }} 架次/小时</span>
          </div>
          <div class="detail-row">
            <span class="detail-label">预计持续时间：</span>
            <span>{{ row.duration }}</span>
          </div>
          <div class="action-buttons">
            <el-button 
              size="mini" 
              @click="handleSpecialReport(row)"
              class="report-btn"
            >
              特情上报
            </el-button>
            <el-button 
              size="mini" 
              type="primary"
              @click="handleOperationControl(row)"
              class="control-btn"
            >
              运行管控
            </el-button>
          </div>
        </div>
      </template>
    </el-table-column>
    
    <el-table-column
      v-for="col in columns"
      :key="col.prop"
      :prop="col.prop"
      :label="col.label"
      :width="col.width"
    >
      <template #default="{row}">
        <span v-if="col.prop === 'alertLevel'" :class="alertLevelClass(row.alertLevel)">
          {{ getAlertLevel(row.alertLevel) }}
        </span>
        <span v-else>{{ row[col.prop] }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: ['data', 'columns'],
  methods: {
    // 获取风险等级文字描述
    getAlertLevel(level) {
      const levels = {
        1: '安全',
        2: '安全',
        3: '安全',
        4: '预警',
        5: '告警'
      }
      return levels[level] || '未知'
    },

    // 设置状态样式
    statusClass(status) {
      return {
        'status-processing': status === '处理中',
        'status-resolved': status === '已处理',
        'status-pending': status === '待处理'
      }
    },

    // 设置风险等级样式
    alertLevelClass(level) {
      return {
        'alert-level-4': level === 4,
        'alert-level-5': level === 5
      }
    },

    // 处理运行管控
    handleOperationControl(row) {
      this.$emit('operation-control', {
        ...row,
        // 添加更多需要传递给弹窗的数据
        coordinates: this.getRouteCoordinates(row.id) // 示例方法，需实际实现
      })
    },

    // 处理行点击
    handleRowClick(row) {
      this.$set(row, 'expanded', !row.expanded)  // 使用Vue.set保证响应式
      console.log('展开状态:', row.expanded, '行数据:', JSON.parse(JSON.stringify(row)))

    },

    // 处理特情上报
    handleSpecialReport(row) {
      this.$emit('special-report', row)
    }
  }
}
</script>

<style scoped>
/* 在CustomTable组件的style部分添加 */
.expand-content {
  padding: 15px;
  background: rgba(0, 24, 47, 0.8);
  border-top: 1px solid #03498f;
}

.detail-row {
  display: grid;
  grid-template-columns: 80px 1fr 80px 1fr;
  gap: 10px;
  margin-bottom: 8px;
  align-items: center;
}

.detail-label {
  color: #87b7da;
  font-size: 12px;
}

.action-buttons {
  margin-top: 12px;
  text-align: center;
}

/* 状态颜色 */
.status-processing {
  color: #e6a23c;
}
.status-resolved {
  color: #67c23a;
}
.status-pending {
  color: #f56c6c;
}

/* 风险等级标识 */
.alert-level-4 {
  color: #e6a23c;
}
.alert-level-5 {
  color: #f56c6c;
}

/* 表格样式 */
.alert-table {
  background: transparent;
  color: #fff;
}

.alert-table::v-deep .el-table__header th {
  background: #00284d;
  color: #87b7da;
}

.alert-table::v-deep .el-table__row {
  background: rgba(0, 24, 47, 0.8);
  color: #fff;
}

.alert-table::v-deep .el-table__row:hover {
  background: rgba(0, 40, 77, 0.8);
}

/* 按钮样式 */
.report-btn {
  background-color: transparent;
  border: 1px solid #409eff;
  color: #409eff;
}

.control-btn {
  background-color: #409eff;
  border-color: #409eff;
}
</style>